<template>
  <div class="carContent">
    <div class="content">
      <div class="fl-left">
        <dl>
          <dt><a href="#">订单中心</a></dt>
          <dd><a href="#">我的订单</a></dd>
          <dd><a href="#">团购订单</a></dd>
          <dd><a href="#">本地生活订单</a></dd>
          <dd><a href="#">我的预售</a></dd>
          <dd><a href="#">评价晒单</a></dd>
          <dd><a href="#">取消订单记录</a></dd>
        </dl>
        <dl>
          <dt><a href="#">关注中心</a></dt>
          <dd><a href="#">关注的商品</a></dd>
          <dd><a href="#">关注的店铺</a></dd>
          <dd><a href="#">关注的专辑</a></dd>
          <dd><a href="#">关注的品牌</a></dd>
          <dd><a href="#">关注的活动</a></dd>
          <dd><a href="#">浏览历史</a></dd>
        </dl>
        <dl>
          <dt><a href="#">特色业务</a></dt>
          <dd><a href="#">我的营业厅</a></dd>
          <dd><a href="#">京东通信</a></dd>
          <dd><a href="#">定期送</a></dd>
          <dd><a href="#">京东代下单</a></dd>
          <dd><a href="#">我的回收单</a></dd>
          <dd class="lastdd"><a href="#">节能补贴</a></dd>
        </dl>
      </div>
      <div class="fl-right">
        <div class="title">我的订单</div>
        <div class="content-head">
          <div class="one">商品</div>
          <div class="two">订单详情</div>
          <div>收货人</div>
          <div>金额</div>
          <div>状态</div>
          <div>操作</div>
        </div>
        <div class="content-tb" v-for="c1 in orderList" :key="c1.id">
          <div class="tb-head">
            <span
              >{{ newdate(c1[0].order_time) }}订单编号:{{
                c1[0].order_id
              }}</span
            >
            <span class="el-icon-delete"></span>
          </div>
          <table v-for="c2 in c1" :key="c2.id">
            <tr>
              <td>
                <img :src="$target + c2.product_picture" alt="" />
                <div>
                  <span>{{ c2.product_name }}</span>
                  <span>x{{ c2.product_num }}</span>
                </div>
                <span>售后申请</span>
              </td>
              <td>{{ name }}</td>
              <td>总金额<br />{{ c2.product_num * c2.product_price }}元</td>
              <td>未支付</td>
              <td>评价晒单</td>
            </tr>
          </table>
        </div>
        <div>
          <div class="title">猜你喜欢</div>
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'XOrder',
  data() {
    return {
      orderList: []
    }
  },
  methods: {
    newdate(nS) {
      new Date(nS).toLocaleString()
      return new Date(nS).toLocaleString()
    }
  },
  computed: {
    ...mapState('order', ['name'])
  },
  // 获取订单数据
  mounted() {
    this.$axios
      .post('/api/user/order/getOrder', {
        user_id: 10157
      })
      .then((res) => {
        if (res.data.code === '001') {
          this.orderList = res.data.orders
        } else {
          this.notifyError(res.data.msg)
        }
      })
      .catch((err) => {
        return Promise.reject(err)
      })
  }
}
</script>

<style scoped>
.carContent {
  width: 1200px;
  margin: 0 auto;
}
.content {
  display: flex;
  font-size: 12px;
  color: #515767;
}
.fl-left {
  width: 300px;
  padding-left: 10px;
}
.fl-left dl dt a {
  font-weight: 700;
  color: #17181a;
}
.fl-left dl dd {
  border-bottom: 1px solid #e0e0e0;
  margin: 10px 20px;
  text-align: center;
}
.fl-left dl dd a {
  color: #515767;
}
.fl-left dl .lastdd {
  border-bottom: none;
}
.fl-right {
  width: 900px;
}
.fl-right .title {
  width: 900px;
  height: 40px;
  background-color: #f1f1f1;
  border: 1px solid #e0e0e0;
  line-height: 40px;
  padding-left: 10px;
}

.content-head {
  width: 900px;
  height: 35px;
  background-color: #f1f1f1;
  border: 1px solid #e0e0e0;
  margin-top: 30px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
.content-head div {
  flex: 1;
  text-align: center;
}
.content-head .one {
  flex: 3;
  text-align: left;
}
.content-head .two {
  flex: 4;
  text-align: left;
}

.content-tb {
  margin-top: 20px;
}
.fl-right table {
  border-collapse: collapse;
  width: 100%;
}
table tr td {
  border: 1px solid #e0e0e0;
  border-right: none;
  text-align: center;
  height: 100px;
  padding-top: 40px;
  /* line-height: 100px; */
}
table tr td:first-child {
  text-align: start;
  line-height: normal;
}
table tr td:last-child {
  border-right: 1px solid #e0e0e0;
}
table tr {
  display: flex;
  flex-wrap: wrap;
}
table tr td {
  flex: 1;
}
table tr td:first-child {
  flex: 7;
  display: flex;
  padding: 5px 10px;
}
table tr td:first-child img {
  width: 100px;
}
table tr td:first-child div {
  width: 300px;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  padding-right: 50px;
  margin-left: 10px;
}
table tr td:first-child div span:first-child {
  color: rgb(199, 29, 35);
  width: 200px;
}
.content-tb .tb-head {
  border-bottom: none;
  justify-content: space-between;
  display: flex;
  border: 1px solid #e0e0e0;
  background-color: #f1f1f1;
  border-bottom: none;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
}
.content-tb .tb-head span:last-child {
  font-size: 15px;
  line-height: 30px;
  margin-right: 15px;
  cursor: pointer;
}
</style>
